<template>
  <div style="position: relative">
    <div class="comment-content">
      <div>
        <div style="padding-bottom: 130px;">
          <!--其他-->
          <slot></slot>
          <!--评论区-->
          <div class="content-comment-view" ref="commentList">
            <div
              class="total"
              style="padding: 15px 0 0 15px;"
            >{{ total > 1 ? $t("contents_comment_2") : $t("contents_comment") }}({{total}})</div>
            <div
              class="comment-view-list clearfix"
              v-for="(item, $index) in commentLists"
              :key="$index"
            >
              <div class="commentView-img">
                <router-link tag="div" :to="'/personal/' + cwnEncrypt(item.commentUserEntId)">
                  <img
                    :src="appUrl + item.commentUserImage"
                    alt
                    style="width: 100%;height: 100%;border-radius: 100%;"
                  />
                </router-link>
              </div>
              <div style="width: 100%;float: left;">
                <div v-html="$xss(item.content)"></div>
                <div class="commentView-time">
                  <router-link
                    tag="span"
                    :to="'/personal/' + cwnEncrypt(item.commentUserEntId)"
                    class="word-clamp-1"
                    style="float: left;max-width:calc(100% - 140px);"
                  >{{item.commentUser}}</router-link>
                  <span>&nbsp;&nbsp;{{item.commentTime.split('.')[0] | formTime(item.serverTime)}}</span>
                </div>
                <div class="commentView-like" style="overflow: hidden">
                  <span
                    @click="valuation($index, item, item.isLike, item.cmtId)"
                    :class="{'cur':item.isLike}"
                  >{{item.likeCount ? item.likeCount : 0}}</span>
                  <span
                    @click="sendComment(0,item.cmtId,item.commentUserEntId,item.cmtId,item.commentUser, $index)"
                  >{{item.childComment && item.childComment.length}}</span>
                  <em
                    class="commentView-delete"
                    v-if="item.commentUserEntId == userEntId"
                    @click="clickDeleteComment(item.cmtId,id)"
                  ></em>
                </div>
                <div class="commentView-comment">
                  <ul>
                    <template v-if="item.childComment > item.childComment.length - 4">
                      <li
                      v-for="(reply, childId) in item.childComment"
                      :key="childId"
                    >
                      <div>
                        <router-link
                          tag="span"
                          :to="'/personal/' + cwnEncrypt(reply.commentUserEntId)"
                        >{{reply.commentUser}}</router-link>
<!--                        <span v-show="item.s_cmt_id != reply.s_cmt_reply_to_id ">@</span>-->
<!--                        <router-link-->
<!--                          tag="span"-->
<!--                          :to="'/personal/' + reply.toUser.usr_ent_id"-->
<!--                          v-show="item.s_cmt_id != reply.s_cmt_reply_to_id "-->
<!--                        >{{reply.toUser.usr_display_bil}}</router-link>：-->
                          ：
                        <em
                          @click="sendComment(0,item.cmtId,reply.commentUserEntId,reply.cmtId,reply.commentUser, $index)"
                          v-html="$xss(reply.content)"
                        ></em>
                        <div class="commentView-comment-delete">
                          <span>{{ reply.commentTime | formTime(reply.serverTime)}}</span>
                          <i
                            v-if="reply.commentUserEntId == userEntId"
                            @click="clickDeleteComment(reply.cmtId, item.cmtId)"
                          >{{ $t("group_delete") }}</i>
                          <!--删除-->
                        </div>
                      </div>
                    </li>
                    </template>
                  </ul>
                </div>
                <div
                  class="commentView-more"
                  v-if="item.childComment && item.childComment.length > 3"
                  @click="showMoverFn($index, item.cmtId, item)"
                >{{ $t("comment_view_reply_num", {'value': item.childComment && item.childComment.length}) }}</div>
                <!--查看{{item.replies && item.replies.length}}条回复-->
              </div>
            </div>
          </div>
          <div v-show="commentLists.length>0 && commentLists.length === page.totalRecord && !page.init" class="no-more-data">{{ $t('no_more') }}</div>
          <!--暂无数据-->
          <div v-if="total === 0" class="white-bg" style="height: 300px;">
            <div class="box-table" style="width:100%;height:100%;">
              <div class="box-table-cell" style="text-align: center;">
                <div class="no-data">
                  <img src="../../../static/images/no-data.png" alt />
                  <p class="color999">{{ $t("no_data") }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- v-if="showComment" -->
      <div class="sendComment">
        <div style="width: 100%" v-if="isShowComment">
          <div
            @focus="isFocusInput = true"
            @blur="inputBlur(0)"
            class="commentFoot-contenteditable"
            ref="commentInput0"
            contenteditable="true"
            :placeholder="$t('comment_write')"
          ></div>
          <!--写评论...-->
          <div class="commentFoot-issue" @click="postComment(0)" style="display:inline-block;">
            <!--发送-->
            {{ $t("message_send") }}
          </div>
        </div>
        <div v-if="!isFocusInput && sendCommentOther" style="width: 100%;">
          <slot name="sendCommentOther"></slot>
        </div>
      </div>
    </div>
    <!--弹出的提示-->
    <!--确定删除吗？-->
    <van-dialog
    v-model="deleteTip"
    show-cancel-button
    :confirmButtonText="$t('sure')"
    :cancel-button-text="$t('cancel')"
    :title="$t('confirm_exit_4')"
    @confirm="confirmlDeleteComment">
    </van-dialog>
    <!--查看更多-->
    <div class="mover-reply" v-if="isShowMover">
      <!--条回复-->
      <div class="content">
        <div class="mover-reply-header">
          {{firstLevelComment.childComment && firstLevelComment.childComment.length}}{{ $t('know_reply_num_2') }}
          <div class="close-icon" @click="closeComment"></div>
        </div>
        <!--一级-->
        <div class="content-comment-view mover" style="overflow: auto;height: 100%">
          <div class="comment-view-list clearfix" style="background: #fafafa">
            <div class="commentView-img">
              <router-link tag="div" :to="'/personal/' + cwnEncrypt(firstLevelComment.commentUserEntId)">
                <img
                  :src="appUrl + firstLevelComment.commentUserImage"
                  alt
                  style="width: 100%;height: 100%;border-radius: 100%;"
                />
              </router-link>
            </div>
            <div style="width: 100%;float: left;">
              <div v-html="$xss(firstLevelComment.content)"></div>
              <div class="commentView-time">
                <span>{{firstLevelComment.commentUser}}</span>.
                <span>{{firstLevelComment.commentTime | formTime(firstLevelComment.serverTime)}}</span>
              </div>
              <div class="commentView-like" style="overflow: hidden">
                <span
                  @click="valuation(index, firstLevelComment, firstLevelComment.isLike, firstLevelComment.cmtId)"
                  :class="{'cur':firstLevelComment.isLike}"
                >{{firstLevelComment.likeCount ? firstLevelComment.likeCount : 0}}</span>
                <span
                  @click="sendComment(1,firstLevelComment.cmtId, firstLevelComment.commentUserEntId, firstLevelComment.cmtId, firstLevelComment.commentUser,tipInfo.index)"
                >{{firstLevelComment.childComment && firstLevelComment.childComment.length}}</span>
                <em
                  class="commentView-delete"
                  v-if="firstLevelComment.commentUserEntId == userEntId"
                  @click="clickDeleteComment(firstLevelComment.cmtId,id)"
                ></em>
              </div>
            </div>
          </div>
          <!--二级-->
          <template  v-if="secondaryList">
           <div
            class="comment-view-list clearfix"
            v-for="(item, child, $index) in  secondaryList"
            :key="$index"
          >
            <div class="commentView-img">
              <router-link tag="div" :to="'/personal/' + cwnEncrypt(item.commentUserEntId)">
                <img
                  :src="appUrl + item.commentUserImage"
                  alt
                  style="width: 100%;height: 100%;border-radius: 100%;"
                />
              </router-link>
            </div>
            <div style="width: 100%;float: left;">
              <div
                @click="sendComment(1,firstLevelComment.cmtId, item.commentUserEntId, item.cmtId, item.commentUser, tipInfo.index)"
                v-html="$xss(item.content)"
              ></div>
              <div class="commentView-time">
                <router-link
                  tag="span"
                  :to="'/personal/' + cwnEncrypt(item.commentUserEntId)"
                >{{item.commentUser}}</router-link>.
                <span>{{item.commentTime | formTime(item.serverTime)}}</span>
              </div>
              <div class="commentView-like" style="overflow: hidden">
                <em
                  class="commentView-delete"
                  v-if="item.commentUserEntId == userEntId"
                  @click="clickDeleteComment(item.cmtId,id)"
                ></em>
              </div>
              <div class="commentView-comment">
                  <template v-for="(reply, childId) in item.childComment">
                   <li :key="childId" v-if="(childId < 3 && item.list.length > 3) || item.list.length < 4">
                    <router-link
                      tag="div"
                      :to="'/personal/' + cwnEncrypt(reply.commentUserEntId)"
                      class="commentView-comment-img"
                    >
                      <img :src="appUrl + reply.commentUserImage" alt />
                    </router-link>
                    <div>
                      <router-link
                        tag="span"
                        :to="'/personal/' + cwnEncrypt(reply.commentUserEntId)"
                      >{{reply.user.usr_display_bil}}</router-link>
<!--                      <span v-show="item.s_cmt_id != reply.s_cmt_reply_to_id ">@</span>-->
<!--                      <router-link-->
<!--                        tag="span"-->
<!--                        :to="'/personal/' + reply.toUser.usr_ent_id"-->
<!--                        v-show="item.s_cmt_id != reply.s_cmt_reply_to_id "-->
<!--                      >{{reply.toUser.usr_display_bil}}</router-link>：-->
                        ：
                      <em
                        @click="sendComment(1,firstLevelComment.cmtId,reply.commentUserEntId,reply.cmtId,reply.commentUser, tipInfo.index)"
                        v-html="$xss(reply.content)"
                      ></em>
                      <div class="commentView-comment-delete">
                        <span>{{reply.commentTime | formTime(reply.serverTime)}}</span>
                        <i
                          v-if="reply.commentUserEntId == userEntId"
                          @click="clickDeleteComment(reply.cmtId, item.cmtId)"
                        >{{ $t("group_delete") }}</i>
                        <!--删除-->
                      </div>
                    </div>
                  </li>
                  </template>
              </div>
              <div
                class="commentView-more"
                v-if="item.list && item.list.length > 3"
                @click="showMoreData(item)"
              >{{ $t("comment_view_reply_num", {'value': item.list && item.list.length}) }}</div>
              <!--查看{{item.replies && item.replies.length}}条回复-->
            </div>
          </div>
          </template>
          <div class="no-more">
            <van-divider>{{ $t('no_more') }}</van-divider>
          </div>
        </div>
      </div>
      <!-- 发送评论1 -->
      <div class="sendComment" >
        <div style="width: 100%">
          <div
            @focus="isFocusInput = true"
            @blur="inputBlur(1)"
            class="commentFoot-contenteditable"
            ref="commentInput1"
            contenteditable="true"
            :placeholder="$t('comment_write')"
          ></div>
          <!--写评论...-->
          <div class="commentFoot-issue" @click="postComment(1)" style="display:inline-block;">
            <!--发送-->
            {{ $t("message_send") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'CommentList',
    props: {
        showComment: {
            default: true
        },
        id: {

        },
        module: {

        },
        tkhId: {

        },
        pageNo: {

        },
        moreCommentCount: {

        },
        sendCommentOther: {
        }
    },
    data() {
        return {
            userIdObj: {}, //发布评论的所需的id
            isFocusInput: false, //输入框是否获得焦点
            userEntId: '', //当前登用户名字
            commentLists: [], //评论列表
            onFetching: false, //滚动加载是否到底部
            deleteUserId: {}, //删除评论所需的id
            deleteTip: false, //确认是否删除提示
            total: 0,
            copyPageNo: 1,
            secondaryList: {}, //展开更多的评论列表
            isShowMover: false, //展示更多评论
            firstLevelComment: {}, //展开更多时候的一级评论
            tipInfo: {}, //存储当前窗口信息
            page: {
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
                init: true
            },
            hideSendInput: false,
            isLoadingData: false,
            isHandle: false, // 点赞是否在进行中
            addData: {
                itmOpenCommentInd: ''
            },
            screenHeightNoChange: true,
            isShowComment: false
        };
    },
    methods: {
        ...{ cwnEncrypt, cwnDecrypt },
        inputBlur(type) {
            if (type === 0) {
                this.$refs.commentInput0.setAttribute(
                    'placeholder',
                    this.$t('comment_write')
                ); //写评论...
                // this.isFocusInput = false;
                if (this.$refs.commentInput0.innerHTML === '') {
                    this.userIdObj = {};
                }
            } else {
                this.$refs.commentInput1.setAttribute(
                    'placeholder',
                    this.$t('comment_write')
                ); //写评论...
                // this.isFocusInput = false;
                if (this.$refs.commentInput1.innerHTML === '') {
                    this.userIdObj = {};
                }
            }
        },
        /*点赞*/
        valuation(index, item, isLike, id) {
            if (this.isHandle) {
                return false;
            }
            this.isHandle = true;
            if (isLike) {
                this.$axios({
                    method: 'POST',
                    // url: `/app/valuation/cancel/${this.module}/${id}`,
                    url: `/app/api/valuation/like`,
                    // params: {
                    //     isComment: 1
                    // }
                    data: {
                        targetId: id,
                        typeEnum: this.module.toUpperCase(),
                        isLike: 0,
                        isComment: 1
                    }
                }).then(res => {
                    this.commentLists[index].isLike = 0;
                    // let obj = {
                    //     ...{ s_cnt_like_count: 0 },
                    //     ...this.commentList[index].snsCount
                    // };
                    // this.commentList[index].snsCount = obj;
                    this.commentLists[index].likeCount -= 1;
                    this.isHandle = false;
                });
            } else {
                this.$axios({
                    method: 'POST',
                    // url: `/app/valuation/praise/${this.module}/${id}`,
                    url: `/app/api/valuation/like`,
                    // params: {
                    //     isComment: 1
                    // }
                    data: {
                        targetId: id,
                        typeEnum: this.module.toUpperCase(),
                        isLike: 1,
                        isComment: 1
                    }
                }).then(res => {
                    this.commentLists[index].isLike = 1;
                    // let obj = {
                    //     ...{ s_cnt_like_count: 0 },
                    //     ...this.commentList[index].snsCount
                    // };
                    // this.commentList[index].snsCount = obj;
                    this.commentLists[index].likeCount += 1;
                    this.isHandle = false;
                });
            }
        },
        /*确认删除*/
        confirmlDeleteComment() {
            this.deleteComment();
        },
        /*触发删除评论*/
        clickDeleteComment(cmtId, tartgetId) {
            this.deleteUserId = {
                cmtId,
                tartgetId
            };
            this.deleteTip = true;
        },
        /*删除评论*/
        deleteComment() {
            let { cmtId, tartgetId } = this.deleteUserId;
            let _this = this;
            this.$axios({
                method: 'DELETE',
                // url: `/app/comment/del/${cmtId}/${tartgetId}`
                url: `/app/api/comment/${cmtId}/${this.module.toUpperCase()}`
            }).then(res => {
                this.commentLists = [];
                // this.$emit('deletecomments');
                this.copyPageNo = 1;
                this.page.pageNo = 1;
                /*如果二级或三级有值就删除*/
                if (
                    _this.firstLevelComment != null &&
                    _this.firstLevelComment.replies != null
                ) {
                    for (let i = 0; i < _this.firstLevelComment.replies.length; i++) {
                        let comment = _this.firstLevelComment.replies[i];
                        if (comment.s_cmt_id === cmtId) {
                            _this.firstLevelComment.replies.splice(i, 1);
                        }
                    }
                }
                _this.getCommentList();
            });
        },
        /*评论其他用户*/
        sendComment(type, id, userId, repalyTo, name, index) {
            if (type === 0) {
                if (this.showComment === false) {
                    this.$emit('focusInput', name, id,
                               userId,
                               repalyTo,
                               index);
                    this.userIdObj = {
                        id,
                        userId,
                        repalyTo,
                        index
                    };
                } else {
                    this.$refs.commentInput0.focus();
                    this.$refs.commentInput0.setAttribute('placeholder', `@${name}`);
                }
            } else {
                if (this.showComment === false) {

                } else {
                    this.$refs.commentInput1.focus();
                    this.$refs.commentInput1.setAttribute('placeholder', `@${name}`);
                }
            }
            this.userIdObj = {
                id,
                userId,
                repalyTo,
                index
            };
        },
        /*请求发送评论*/
        postComment(type) {
            let {
                id = this.id,
                userId = 0,
                repalyTo = userId,
                index
            } = this.userIdObj;
            if (type === 1 && !this.userIdObj.repalyTo) {
                id = this.firstLevelComment.cmtId;
                userId = this.firstLevelComment.commentUserEntId;
                repalyTo = this.firstLevelComment.cmtId;
                index = this.tipInfo.index;
                this.userIdObj.id = this.firstLevelComment.cmtId;
                this.userIdObj.userId = this.firstLevelComment.commentUserEntId;
                this.userIdObj.repalyTo = this.firstLevelComment.cmtId;
                this.userIdObj.index = this.tipInfo.index;
            }
            var len = 0;
            let parData = {
                commentId: this.userIdObj.id ? this.userIdObj.id : 0,
                topCommentId: this.userIdObj.repalyTo ? this.userIdObj.repalyTo : 0,
                content: this.$refs.commentInput0.innerHTML,
                type: this.module.toUpperCase()
            };
            if (!this.userIdObj.repalyTo) {
                parData.targetId = this.id;
            }
            if (type === 0) {
                for (var i = 0; i < this.$refs.commentInput0.innerText.length; i++) {
                    if (
                        this.$refs.commentInput0.innerText.charCodeAt(i) > 127 ||
                        this.$refs.commentInput0.innerText.charCodeAt(i) === 94
                    ) {
                        len += 2;
                    } else {
                        len += 1;
                    }
                }
                if (len > 0 && len <= 400) {
                    //
                    this.$axios({
                        method: 'POST',
                        // url: `/app/comment/${this.module}/${id}`,
                        url: `/app/api/comment`,
                        params: {
                            // itmId: id,
                            // repalyTo: repalyTo,
                            // toUserId: userId,
                            // note: this.$refs.commentInput0.innerHTML,
                            // tkhId: this.tkhId
                        },
                        data: parData
                    }).then(res => {
                        // this.$refs.commentInput0.innerHTML = '';
                        // if (index !== -1 && (index === 0 || index)) {
                        //     //评论下的回复
                        //     this.commentList[index].replies = res.data.replies;
                        // } else {
                        //     //一级回复
                        //     this.commentList.unshift(res.data.comment);
                        // }
                        // this.total += 1;
                        // if (this.isShowMover) {
                        //     this.showMoverFn();
                        // }
                        // this.$emit('upLen', this.total);
                        // this.userIdObj = {};
                        this.commentLists = [];
                        this.$refs.commentInput0.innerHTML = '';
                        this.userIdObj = {};
                        this.total = 0;
                        this.page.pageNo = 1;
                        this.getCommentList();
                    });
                } else if (len === 0) {
                    this.$toast(this.$t('message_please_content'));
                } else {
                    this.$toast(this.$t('comment_max_input'));
                }
            } else {
                for (var j = 0; j < this.$refs.commentInput1.innerText.length; j++) {
                    if (
                        this.$refs.commentInput1.innerText.charCodeAt(j) > 127 ||
                        this.$refs.commentInput1.innerText.charCodeAt(j) === 94
                    ) {
                        len += 2;
                    } else {
                        len += 1;
                    }
                }
                if (len > 0 && len <= 400) {
                    this.$axios({
                        method: 'POST',
                        // url: `/app/comment/${this.module}/${id}`,
                        url: `/app/api/comment`,
                        params: {
                            // itmId: id,
                            // repalyTo: repalyTo,
                            // toUserId: userId,
                            // note: this.$refs.commentInput1.innerHTML,
                            // tkhId: this.tkhId
                        },
                        data: parData
                    }).then(res => {
                        // this.$refs.commentInput1.innerHTML = '';
                        // if (index !== -1 && (index === 0 || index)) {
                        //     //评论下的回复
                        //     this.commentList[index].replies = res.data.replies;
                        // } else {
                        //     //一级回复
                        //     this.commentList.unshift(res.data.comment);
                        // }
                        // this.total += 1;
                        // if (this.isShowMover) {
                        //     this.showMoverFn();
                        // }
                        // this.$emit('upLen', this.total);
                        // this.userIdObj = {};
                        this.commentLists = [];
                        this.$refs.commentInput0.innerHTML = '';
                        this.userIdObj = {};
                        this.total = 0;
                        this.page.pageNo = 1;
                        this.getCommentList();
                    });
                } else if (len === 0) {
                    this.$toast(this.$t('message_please_content'));
                } else {
                    this.$toast(this.$t('comment_max_input'));
                }
            }
        },
        //获取评论列表
        getCommentList() {
            if (this.isLoadingData) {
                return;
            } else {
                this.isLoadingData = true;
            }
            this.$axios({
                method: 'POST',
                // url: `/app/comment/${this.module}/commentPageJson/${this.id}`,
                url: `/app/api/comment/list`,
                params: {
                    pageSize: 10,
                    type: 'commentlist', // 加这个是为了防止请求重复
                    sortname: 's_cmt_create_datetime',
                    sortorder: 'desc',
                    moreCommentCount: this.moreCommentCount
                        ? this.moreCommentCount
                        : 'false',
                    pageNo: this.page.pageNo
                },
                data: {
                    targetId: this.id,
                    isTop: true,
                    type: this.module.toUpperCase()
                }
            }).then(res => {
                //
                if (res.data) {
                    this.isLoadingData = false;
                    //总回复数，等于回复是+子回复数
                    this.$emit('change-success', res.data);
                    if (this.moreCommentCount) {
                        // this.total = res.data.moreCommentCount;
                        //2020-11-27 11:20:53
                        if (res.data.moreCommentCount) {
                            this.total = res.data.moreCommentCount;
                        } else {
                            this.total = res.data.totalRecord;
                        }
                    } else {
                        // this.total = res.data.total;
                        this.total = res.data.totalRecord;
                    }
                    if (res.data.results && res.data.results.length > 0) {
                        this.commentLists = [...this.commentLists, ...res.data.results];
                    }
                    if (this.isShowMover) {
                        this.showMoverFn();
                    }
                    //后台分页数据统计
                    this.page.pageNo++;
                    this.page.pageSize = res.data.pageSize;
                    this.page.totalRecord = res.data.totalRecord;
                    this.page.totalPage = res.data.totalPage;
                    this.page.init = false;
                    if (this.page.pageNo <= this.page.totalPage) {
                        setTimeout(() => {
                            this.$store.state.course.onFetching = false;
                        }, 800);
                    }
                }
                //更新父类评论总数
                this.$emit('upLen', this.total);
            });
        },
        /*跳转定位*/
        jump() {
            if (this.$refs.scrollerBottom != null) {
                this.$refs.scrollerBottom.reset({
                    top: this.$refs.commentList.offsetTop
                });
            }
        },
        /**
         * 点击查看更多
         * @param index
         * @param id
         */
        showMoverFn(index, id, item) {
            this.hideSendInput = true;
            let fnIndex = index + 1;
            let fnId = id;
            if (fnIndex && fnId) {
                this.tipInfo = {
                    index,
                    id,
                    item
                };
            }
            this.firstLevelComment = item || this.tipInfo.item;
            this.index = index || this.tipInfo.index;
            this.isShowMover = true;
            let replies =
                index || index === 0
                    ? this.commentLists[index].childComment
                    : this.commentLists[this.tipInfo.index].childComment;
            let repliesId = id || this.tipInfo.id;
            let arr = {};
            let parentCmtId = this.commentLists[index].cmtId;
            replies.forEach(val => {
                // if (val.s_cmt_reply_to_id === repliesId) {
                //     arr[val.s_cmt_id] = val;
                //     arr[val.s_cmt_id].child = [];
                //     arr[val.s_cmt_id].list = [];
                // }
                if (parentCmtId === repliesId) {
                    arr[val.cmtId] = val;
                    arr[val.cmtId].child = [];
                    arr[val.cmtId].list = [];
                }
            });
            for (let i in arr) {
                for (let a = 0; a < replies.length; a++) {
                    if (Number(i) === parentCmtId) {
                        arr[i].child.push(replies[a].cmtId);
                        arr[i].list.push(replies[a]);
                        if (arr[i].childComment.length < 3) {
                            arr[i].childComment.push(replies[a]);
                        }
                    } else if (
                        arr[i].child.indexOf(parentCmtId) !== -1
                    ) {
                        arr[i].child.push(replies[a].cmtId);
                        arr[i].list.push(replies[a]);
                        if (arr[i].replies.length < 3) {
                            arr[i].replies.push(replies[a]);
                        }
                    }
                }
            }
            this.secondaryList = arr;
            //关闭上层的heaader
            this.$store.commit('setIosHeaderShow', false);
        },
        showMoreData(item) {
            item.replies = item.list;
            item.list = [];
        },
        closeComment() {
            //关闭上层的heaader
            this.$store.commit('setIosHeaderShow', true);
            this.isShowMover = false;
        },
        getFreshDetail() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/detail/basic`,
                params: {
                    itmId: this.$route.params.itmId || this.$route.params.id,
                    mobileInd: 1
                }
            }).then((res) => {
                this.addData = res.data;
                this.isShowComment = res.data.app !== null;

                this.addData.itmOpenCommentInd = res.data.itmOpenCommentInd;
            });
        }
    },
    mounted() {
        this.userEntId = window.localStorage.getItem('loginUser');
        this.getCommentList();
        if (!(this.$route.path.indexOf('knowledgeDetail') > -1)) {
            this.getFreshDetail();
        }
        const self = this;
        window.onresize = () => {
            if (self.oldFullHeight) {
                self.screenHeightNoChange = document.documentElement.clientHeight === self.oldFullHeight;
            }
        };
    },
    watch: {
        pageNo(val) {
            this.copyPageNo = JSON.parse(JSON.stringify(val));
            this.getCommentList();
            if (!(this.$route.path.indexOf('knowledgeDetail') > -1)) {
                this.getFreshDetail();
            }
        }
    }
};
</script>

<style scoped>
/*发布评论*/
.sendComment {
  /* display: flex; */
  justify-items: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #dddddd;
  flex-wrap: nowrap;
  z-index: 98;
}
.commentFoot-contenteditable {
  width: calc(100% - 20%);
  min-height: calc(56px - 30px);
  max-height: 100px;
  float: left;
  border: none;
  font-size: 14px;
  overflow-y: auto;
  padding: 15px;
  outline: none;
}
.commentFoot-contenteditable:empty:before {
  content: attr(placeholder);
  color: #bbb;
}
.commentFoot-contenteditable:before {
  content: none;
}
.commentFoot-issue {
  float: left;
  line-height: 56px;
  font-size: 14px;
  color: #075ebb;
}
/*评论*/
.comment-content {
  height: calc(100% - 56px);
  box-sizing: border-box;
}
.content-comment-view {
  background: #ffffff;
}
.comment-view-list {
  padding: 30px 15px 20px 72px;
  border-bottom: 1px solid #cccccc;
}
.commentView-img {
  float: left;
  margin-left: -57px;
}
.commentView-img div {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 1px solid #999999;
}
.commentView-comment ul li {
  display: flex;
  padding-left: 10px;
  margin-top: 15px;
}
.commentView-comment ul li span {
  color: #999999;
}
.commentView-comment ul li .commentView-comment-delete {
  margin-top: 10px;
  font-size: 12px;
}
.commentView-comment ul li .commentView-comment-delete i {
  color: #1f52cc;
  margin-left: 8px;
}
.commentView-comment-img img {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 100%;
  margin-right: 10px;
}
.commentView-time {
  color: #999999;
  margin: 10px 0 20px 0;
}
.commentView-like {
  margin-bottom: 15px;
}
.commentView-like span {
  display: flex;
  float: left;
  margin-right: 25px;
  color: #666666;
  font-size: 12px;
  line-height: 16px;
}
.commentView-like span:first-child:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../../../static/images/icon-03.png) no-repeat 0 -66px;
  background-size: 15px;
  margin-right: 5px;
}
.commentView-like span.cur:first-child:before {
  background-position: 0 -151px;
}
.commentView-like span:nth-child(2):before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../../../static/images/icon-03.png) no-repeat -1px -86px;
  background-size: 15px;
  margin-right: 5px;
}
.commentView-like .commentView-delete {
  float: right;
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../../../static/images/icon-03.png) no-repeat 0 -194px;
  background-size: 15px;
}
.commentView-more {
  color: #1f52cc;
  font-size: 14px;
  margin: 30px 0 0 10px;
}
.mover-reply {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
}
.no-more {
  background: #eff1f4;
}
.commentFoot-overall {
  display: flex;
}
.no-more-data {
  text-align: center;
  padding: 10px 0;
  color: #999;
}
</style>
